<template>
  <div>
    <el-card style="margin:20px">
      <el-row class="showsteps">
        <el-steps :active="active" finish-status="success" class="divSteps">
          <el-step title="填写基础信息" />
          <el-step title="填写盘点清单" />
        </el-steps>
      </el-row>
      <el-row>
        <el-form
          ref="formInline"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          label-position="top"
          :rules="rules"
        >
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="盘点单号">
                <el-input v-model="formInline.code" disabled class="input" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6" class="">
              <el-form-item label="盘点原因" prop="reason">
                <el-select v-model="formInline.reason" placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="item in enumeration.reason.options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="盘点维度" prop="dimension">
                <el-select
                  v-model="formInline.dimension"
                  placeholder="请选择"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="item in enumeration.dimension.options"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="盘点类型" prop="type">
                <el-select
                  v-model="formInline.type"
                  placeholder="请选择"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="item in enumeration.counting.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top:20px">
            <el-col :span="6">
              <el-form-item label="盘点货区" prop="location">
                <el-cascader
                  v-model="formInline.location"
                  placeholder="请选择"
                  :options="options"
                  style="width:100%"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="货主" prop="ownerId">
                <el-select
                  v-model="formInline.ownerId"
                  placeholder="请选择"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="item in ownerId"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划时间" prop="date">
                <el-date-picker
                  v-model="formInline.planCheckTime"
                  style="width: 100%;"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <div class="bottom1">
          <el-button @click="btnBack">返回</el-button>
          <el-button @click="btnOK">下一步</el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import enumeration from '@/components/SearchControl/selete.js'
import { getPD, getOwner, getuseWarehouse, getArealist, addPD, getCheckpage } from '@/api/inventory'
export default {
  name: 'YuanfengWarehouseTest',

  data() {
    const validateAreaId = (rule, value, callback) => {
      console.log(value)
      if (value[1]) {
        callback()
      } else {
        // this.$message.error('请选择库区')
        callback(new Error('请选择库区'))
      }
    }
    return {
      active: 0,
      enumeration: enumeration,
      formInline: {
        code: '',
        ownerId: '',
        reason: '',
        planCheckTime: '',
        type: '',
        dimension: '',
        location: []
      },
      ownerId: [],
      options: [],
      list: ['798976929725153313', '798978090452648321'],
      // 日期禁止
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      // 表单校验规则
      rules: {
        ownerId: [
          { required: true, message: '请选择货主' }
        ],
        reason: [
          { required: true, message: '请选择盘点原因' }
        ],
        type: [
          { required: true, message: '请选择盘点类型' }
        ],
        dimension: [
          { required: true, message: '请选择盘点维度' }
        ],
        planCheckTime: [
          { required: true, message: '请选择计划时间' }
        ],
        location: [
          { required: true, validator: validateAreaId }
        ]
      }

    }
  },
  async created() {
    const result = await getOwner()
    this.ownerId = result.data.data
    //
    this.getArea()
    console.log(this.options)
    // 判断是新增或者编辑
    if (this.$route.params.id === 'null') {
      // console.log('这是新增进来的')
      this.init()
    } else {
      // console.log(this.$route.params)
      const id = this.$route.params.id
      const res = (await getCheckpage({ code: id })).data.data.records[0]
      // console.log(res.warehouseId, res.areaId)
      this.formInline = { ...res }
      this.formInline.location = [res.warehouseId, res.areaId]
      // this.$set(this.formInline, 'warehouseId', [res.warehouseId, res.areaId])
      console.log(this.formInline)
      // this.abc = true
      // console.log(this.options)
      // console.log(this.formInline.warehouseId)
    }[]
  },
  mounted() {

  },

  methods: {
    // 新增的初始化
    async init() {
      const res = await getPD()
      // console.log(result)
      this.formInline.code = res.data.data
    },
    async getArea() {
      const res = (await getuseWarehouse()).data.data
      for (let i = 0; i < res.length; i++) {
        const result = await getArealist(res[i].id)
        const children = []
        // console.log('子项目', res)
        if (result.data.data) {
          result.data.data.forEach(el => {
            // console.log(1)
            children.push({ 'label': el.name, 'value': el.id })
          })
        }
        this.options.push({ label: res[i].name, value: res[i].id, children })
      }
    },
    // 下一步按钮
    async btnOK() {
      // console.log(this.formInline.value)
      this.$refs.formInline.validate(async(valid) => {
        if (valid) {
          // console.log('允许发送请求')
          const obj = { ...this.formInline, warehouseId: this.formInline.location[0], areaId: this.formInline.location[1], status: '1', id: '' }
          // console.log(this.formInline)
          delete obj.location
          await addPD(obj)
          this.$message.success('添加盘点单成功')
          // 清空表单
          this.formInline = {
            code: '',
            ownerId: '',
            reason: '',
            planCheckTime: '',
            type: '',
            dimension: '',
            location: []
          }
          this.$router.push({ path: '/managestorage/list' })
        } else {
          return
        }
      })
    },
    // 返回上一级的按钮
    btnBack() {
      this.formInline = {
        code: '',
        ownerId: '',
        reason: '',
        planCheckTime: '',
        type: '',
        dimension: '',
        warehouseId: []
      }
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
    border-radius: 15px;

    ::v-deep .el-card__body{
      padding: 30px;
    .el-form{
        height: 196px;
    }
      .el-form-item{
        margin: 0;
        padding: 0px 15px;
        width: 100%;
         .el-form-item__label{
          font-size: 12px;
          height: 18px;
          line-height: 18px;
          color: #887e7e;
          padding: 0;
          margin: 10px 0 ;
          font-weight: 500;
        }
        .el-input__inner{
          width: 100%;
          font-size: 14px;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
          border: 1px solid #f8f5f5;
          background: #f8f5f5;
          border-radius: 6px;
          color:#1f2d3d;

    }
    .el-input__inner:hover{
      border: 1px solid #887e7e
    }
    .el-input__inner:focus{
      border: 1px solid #ffb200!important
    }
      }
    }

      .el-form-item{
        width: 80px;
        padding: 15px 0px;
        margin-left: 38px;
        // height: 40px;
      }

}

.showsteps{
    width:100%;
    height: 156px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .divSteps{
    // background-color: black;
    width: 440px;
    height: 100px;
}

}

.bottom1{
  padding-top: 25px;
  text-align: center;
  // height: 200px;

  .el-button{
    width: 118px;
    box-sizing: content-box;
    height: 38px;
    padding:1px 26px 1px 26px ;
    border-radius: 20px;
  }
}

</style>
